<template>
  <div class="team">
    <van-nav-bar :title="$t('team.title')" left-arrow @click-left="onClickLeft">
      <template #right>
        <span class="team-url" @click="router.push({ path: '/invitation' })">{{
          t("team.url")
        }}</span>
      </template>
    </van-nav-bar>
    <div class="team-head">
      <div class="back-vard"></div>
      <div class="team-head-card">
        <div class="text-title">{{ $t("team.commission") }}</div>
        <div class="text-nav">
          <span class="text-nav-name">USD</span>
          <span class="text-nav-money">{{ money.totalCommission }}</span>
        </div>
        <div class="text-grid">
          <div
            class="text-grid-mock"
            v-for="(item, index) of arrGrig"
            :key="'grid' + index"
          >
            <div class="text-grid-money">{{ money[item.value] }}</div>
            <div class="text-grid-title">{{ item.label }}</div>
            <div class="right-border" v-if="index !== 3"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="team-nav">
      <span class="text-detail">{{ $t("team.detailCommission") }}</span>
      <span class="text-more" @click="onDetail"
        >{{ $t("team.subordinate") }} >
      </span>
    </div>
    <div class="team-list">
      <van-list
        :loading="loading"
        :finished="finished"
        finished-text="没有更多了~"
        @load="onLoad"
      >
        <van-cell
          v-for="(item, index) of data.list"
          :key="index + 'list'"
          :border="false"
        >
          <template #title>
            <div class="custom-title">
              {{ item.des }}
            </div>
            <div class="custom-time">{{ item.date }}</div>
          </template>
          <template #right-icon>
            <span class="custom-money">+ {{ item.monemoneyy }}</span>
          </template>
        </van-cell>
      </van-list>
      <Empty
        :description="$t('wallet.noHistory')"
        v-if="!data.list.length"
      ></Empty>
    </div>
  </div>
</template>

<script setup>
import Empty from "@/components/Empty";
import { useRouter, useRoute } from "vue-router";
import { ref, reactive } from "@vue/reactivity";
import { useI18n } from "vue-i18n";
import { onMounted } from "vue";
import { Toast } from "vant";
import { getCommissionDetail, getCommissionList } from "@/api/user";
const { t } = useI18n();
const router = useRouter();
const list = ref([]);
const loading = ref(false);
const finished = ref(false);
const level = reactive([
  { name: t("team.level"), value: 1 },
  { name: t("team.seclevel"), value: 2 },
  { name: t("team.thirdlevel"), value: 3 },
]);
const data = reactive({
  money: 60000,
  list: [],
});
let money = reactive({
  oneLevelCommission: "",
  twoLevelCommission: "",
  threeLevelCommission: "",
  todayCommission: "",
  totalCommission: "",
});
const arrGrig = reactive([
  { label: t("team.todayCommission"), value: "todayCommission" },
  { label: t("team.firCommission"), value: "oneLevelCommission" },
  { label: t("team.secCommission"), value: "twoLevelCommission" },
  { label: t("team.thirCommission"), value: "threeLevelCommission" },
]);
onMounted(async () => {
  let res = await getCommissionDetail().catch((err) => {
    Toast(err);
  });
  let list = await getCommissionList();
  console.log(list);
  Object.assign(money, res.data);
  data.list = list.data;
  console.log(data);
});
function onLoad() {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1);
    }

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 1000);
}
function checkStatus(val) {
  let name = level.filter((item) => {
    return Number(item.value) === val;
  });
  console.log(val, name);
  if (name.length !== 0) {
    return name[0].name;
  } else {
    return "";
  }
}
function onDetail() {
  router.push({
    path: "teamdetail",
  });
}
function onClickLeft() {
  history.back();
}
</script>

<style lang="less" scoped>
.team {
  width: 100%;
  position: relative;
  height: 100%;
  background: #f6f6f6;
  &-url {
    font-size: 12px;
    font-weight: bold;
    text-decoration: underline;
    color: #ffffff;
    line-height: 12px;
  }
  :deep(.van-nav-bar) {
    background: var(--title-background-color);
  }
  :deep(.van-nav-bar__title.van-ellipsis) {
    color: white;
  }
  :deep(i.van-badge__wrapper.van-icon.van-icon-arrow-left.van-nav-bar__arrow) {
    color: white;
  }
  &-head {
    position: relative;
    width: 100%;
    .back-vard {
      background: var(--title-background-color);
      height: 85px;
      width: 100%;
      position: relative;
      top: -2px;
      z-index: 99;
    }
    &-card {
      box-sizing: border-box;
      margin-right: 10px;
      margin-left: 10px;
      width: calc(100% - 20px);
      background: #ffffff;
      border-radius: 10px;
      position: absolute;
      top: 14px;
      z-index: 100;
      padding: 17px 19px;
      .text-title {
        font-size: 12px;
        font-family: PingFang SC;
        font-weight: 600;
        color: #333333;
      }
      .text-nav {
        margin-top: 11px;
        &-name {
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
          line-height: 14px;
        }
        &-money {
          margin-left: 8px;
          font-size: 25px;
          line-height: 25px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #f57e0a;
        }
      }
      .text-grid {
        margin-top: 29px;
        display: flex;
        // justify-content : space-between;
        &-mock {
          flex: 1;
          position: relative;
          text-align: center;
        }
        .right-border {
          width: 1px;
          height: 100%;
          background: #cbcbcb;
          position: absolute;
          right: 2px;
          top: 3px;
        }
        &-money {
          font-size: 14px;
          line-height: 14px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #333333;
        }
        &-title {
          font-size: 12px;
          line-height: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          opacity: 0.6;
          margin-top: 10px;
        }
      }
    }
  }
  &-nav {
    position: relative;
    top: 89px;
    padding: 5px 20px;
    .text-detail {
      font-size: 12px;
      font-weight: 500;
      color: #666666;
    }
    .text-more {
      font-size: 12px;
      font-weight: 500;
      color: #ed008c;
      float: right;
    }
  }
  &-list {
    position: relative;
    top: 84px;
    .custom-title {
      font-size: 12px;
      line-height: 12px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333333;
    }
    .van-cell.van-cell--borderless {
      border-bottom: 1px solid #f6f6f6;
    }
    :deep(.van-list__finished-text) {
      background: #f6f6f6;
    }
    .custom-time {
      font-size: 12px;
      line-height: 12px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #cccccc;
      margin-top: 10px;
      margin-bottom: 5px;
    }
    .custom-money {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #f57e0a;
    }
  }
}
</style>
